<template>
  <div style="margin: 5em 10em">
    <el-tabs
      tab-position="left"
      type="card"
      stretch
      :value="activeTab"
      @tab-click="handleClick"
    >
      <el-tab-pane label="安全邮箱" lazy name="email">
        <el-row style="margin-top: 5em"
          ><el-col :span="14" :offset="5">
            <div
              style="color: darkorange; margin-bottom: 2em; text-align: center"
              v-if="!emailValidated"
            >
              <i class="fa fa-info-circle"></i> <strong>验证过</strong>的邮箱可以用来重置密码
            </div>
            <el-form :model="emailForm" ref="emailForm" :rules="emailRules">
              <el-form-item label="邮箱" prop="email" label-width="20%">
                <el-input v-model.trim="emailForm.email"
                  ><template slot="append"
                    ><span style="color: lightgreen" v-if="emailValidated&& emailForm.email==email"
                      ><i class="fa fa-check"></i> 已验证</span
                    >
                    <span style="color: red" v-else
                      ><i class="fa fa-exclamation"></i> 未验证</span
                    ></template
                  ></el-input
                >
              </el-form-item>
              <el-form-item style="text-align: center" size="small" v-show="emailForm.email!=email||!emailValidated">
                <el-button type="primary" @click="changeEmail">{{'验证'}}</el-button>
                <el-button>重置</el-button>
              </el-form-item>
              <el-alert type="success" title="请根据邮件中的操作验证邮箱，如果没收到邮件(注意检查是否被放到垃圾邮件中了)，请隔一段时间再次验证。"
              v-show='showSuccess'></el-alert>
            </el-form></el-col
          ></el-row
        >
      </el-tab-pane>
      <el-tab-pane label="修改密码" lazy name="password">
        <el-row>
          <el-col :span="14" :offset="5">
            <password-form
              class="password-form"
              :form="form"
              :handleSubmit="changePassword"
              :rules="rules"
            ></password-form>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PasswordForm from "../components/PasswordForm.vue";
export default {
  data() {
    var checkPasswordConfirm = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      }
      if (value != this.form.password) {
        return callback(new Error("两次密码不同"));
      }
      callback();
    };
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      }
      let reg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
      if (!reg.test(value)) {
        return callback(new Error("邮箱格式不正确"));
      }
      callback();
    };
    return {
      showSuccess:false,
        email:"",
      emailValidated: false,
      activeTab: "email",
      emailForm: {
        email: "",
      },
      emailRules: {
        email: [{ validator: checkEmail, trigger: blur }],
      },
      form: {
        oldPassword: "",
        password: "",
        passwordConfirm: "",
      },
      rules: {
        oldPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        passwordConfirm: [{ required: true, message: "不能为空", trigger: "blur" },{ validator: checkPasswordConfirm, trigger: "blur" }],
      },
    };
  },
  mounted() {
    if (localStorage.securityActiveTab) {
      this.activeTab = localStorage.securityActiveTab;
    }
    this.emailValidated = localStorage.emailValidated;
    this.getEmail();
  },
  components: {
    PasswordForm,
  },
  methods: {
    changePassword() {
      if (this.form.oldPassword == this.form.password) {
        this.$message({
          message: "新密码与原来密码相同",
          type: "error",
          showClose: true,
        });
        return;
      }
      this.$http
        .post("users/" + localStorage.id + "/change_password/", this.form)
        .then(() => {
          this.$message({
            message: "修改密码成功",
            type: "success",
            showClose: true,
          });
        });
    },
    handleClick(tab) {
      localStorage.securityActiveTab = tab.name;
    },
    getEmail() {
      this.$http.get("users/" + localStorage.id + "/").then((res) => {
        this.emailForm.email = res.data.email;
        this.email = res.data.email
        this.emailValidated = res.data.email_validated
      });
    },
    changeEmail() {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          if(this.emailValidated&&this.email==this.emailForm.email){
              return
          }
            this.$http.post("users/"+localStorage.id+"/validate_email/", this.emailForm).then(()=>{
                // this.$message({
                //     showClose:true,
                //     message:"请根据邮件中的操作验证邮箱，如果没收到邮件(注意检查是否被放到垃圾邮件中了)，请隔一段时间再次验证。",
                //     type: "success",
                //     duration:0
                // })
                this.showSuccess=true
                setTimeout(() => {
                    this.$router.go(0)
                }, 600*1000);
            })
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.password-form {
  padding: 2em 4em;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
</style>